<template>
    <div class="operational">
        <!-- 轮播组件 -->
        <el-carousel
            indicator-position="outside"
            height="auto"
        >
            <el-carousel-item
                v-for="item in datas"
                :key="item.id"
                style="height: 400px;"
            >   
                <div 
                    class="content"
                    @click="clickItem(item)"
                >
                    <el-image
                        style="width: 100%;height: 400px;"
                        :src="item.cover"
                        fit="fill"
                    />
                    <div class="bottom-bar">
                        {{ item.content }}
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 商品列表 -->
    <div>
        <div style="width: 100%; text-align: center; height: 50px; line-height: 50px; font-size: 30px; color: darkblue;"> 
            ~ 为您推荐 ~
        </div>
        <div class="header-bar">
            <div 
                v-for="(ca, index) in categoryList"
                :class="currentSelectedCategoryIndex === index ? 'category-item-title-selected' : 'category-item-title-normal'"
                @click="categoryClick(index)"
            >
                <div style="font-size: 30px; margin-bottom: 5px;">
                    {{ ca.name }}
                </div>
                <div style="font-size: 14px;">
                    {{ ca.description }}
                </div>
            </div>
        </div>
    </div>
    <div class="goods_list">
        <div
            v-for="item in goods"
            class="goods_item"
            @click="goDetail(item)"
        >
            <div style="width: 200px; height: 150px; overflow: hidden;">
                <el-image 
                    style="width: 100%; height: 100%;" 
                    :src="item.image"
                    fit="fill"
                />
            </div>
            <div style="width: 100%; height: 150px; background-color: #eeeeee; position: relative;">
                <div style="padding: 5px">
                    <span class="brand">
                        {{ item.brand }}
                    </span>
                    {{ item.name }}
                </div>
                <div style="padding-left: 5px; padding-right: 5px; font-size: 13px; color: grey;">
                    {{ item.description }}
                </div>
                <div style="padding: 5px; font-size: 18px; color: red;">
                    惊喜价：{{ item.price }}￥
                    <span style="color: grey; font-size: 11px;">
                        原价：{{ item.discounted_price }}￥
                    </span>
                </div>
                <el-tag 
                    style="position: absolute; bottom: 10px; left: 10px"
                    :type="item.status === 1 ? 'success' : 'error'"
                >
                    {{ item.status === 1 ? '售卖中' : '已下架' }}
                </el-tag>
            </div>
        </div>
    </div>
    <div
        v-show="hasMore"
        style="width: 100%; text-align: center; margin-top: 15px; color: grey;"
        @click="loadGoods(categoryList[currentSelectedCategoryIndex].id)"
    >
        点击加载更多
    </div>
</template>
<script setup lang="ts">
import { RequestPath, startRequest, type OperationalItemData, type OperationalResponseData } from '../base/RequestWork';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

// 轮播位绑定数据
const datas = ref();
// 类别数据源
const categoryList = ref();
// 用户当前选中的类别index，默认选中第一个类别
const currentSelectedCategoryIndex = ref(0);
// 商品数据
const goods = ref();
// 分页参数
let offset = 0;
const limit = 4;
// 是否有更多数据
const hasMore = ref(true);
const router = useRouter();
// 请求类别数据
const loadCategory = (cb: () => void) => {
    startRequest(RequestPath.goodsCategoryGet, 'get', {}).then((response) => {
        const data = response.data;
        categoryList.value = data.datas ?? [];
        // 请求完成后执行回调函数
        cb();
    }).catch((error) => {
        ElMessage.error({
            message: error.response.data.error,
        });
    });
}
// 切换类别
const categoryClick = (index: number) => {
    currentSelectedCategoryIndex.value = index;
    // 切换类别，刷新商品列表
    offset = 0;
    goods.value = [];
    loadGoods(categoryList.value[index].id);
}
// 请求商品列表数据
const loadGoods = (cid: number) => {
    startRequest(RequestPath.goodsListGet, 'get', {
        offset, limit, cid
    }).then((response) => {
        const data = response.data;
        const datas = goods.value ?? [];
        // 判断返回的数据量是否小于limit，若小于则表明没有更多数据了
        hasMore.value = (data.datas ?? []).length >= limit;
        // 将返回的数据追加到数据源中
        datas.push(...(data.datas ?? []));
        goods.value = datas;
    }).catch((error) => {
        ElMessage.error({ message: error.response.data.error });
    });
}
// 单机某个运营位的方法，后续实现具体功能
const clickItem = (item: OperationalItemData) => {
    router.push({
        // 后台创建的URI格式类似于'goods/1'，进行完整路由拼接
        path: '/home' + item.uri
    });
}
const goDetail = (item: any) => {
    router.push({
        name: 'goodsDetail',
        params: { id: item.id }
    });
}
// 组件挂载时的生命周期函数
onMounted(() => {
    // 请求运营位数据，只获取启用状态的运营位
    startRequest(RequestPath.operationalGet, 'get', { 'status': 1 }).then((response) => {
        const data = response.data as OperationalResponseData;
        datas.value = data.datas ?? [];
    }).catch((error) => {
        ElMessage.error({
            message: error.response.data.error
        });
    });
    loadCategory(() => {
        loadGoods(categoryList.value[currentSelectedCategoryIndex.value].id);
    });
});
</script>
<style scoped>
    .operational {
        margin-top: 20px;
    }
    .content {
        background-color: azure;
        height: 400px;
    }
    .bottom-bar {
        background-color: #00000077;
        position: fixed;
        height: 40px;
        bottom: 0px;
        width: 100%;
        color: white;
        line-height: 40px;
        padding-left: 20px;
    }
    .header-bar {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .category-item-title-selected {
        color: red;
        width: 300px;
        text-align: center;
    }
    .category-item-title-normal {
        color: black;
        width: 300px;
        text-align: center;
    }
    .goods_list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .goods_item {
        width: 200px;
        height: 300px;
        margin: 10px;
        border-radius: 15px;
        overflow: hidden;
    }
    .brand {
        background-color: red;
        color: white;
        font-size: 12px;
        padding: 2px;
        border-radius: 4px;
        margin-right: 5px;
    }
</style>